<template>
  <div>
    <el-card style="overflow:visible;">
      <el-form :model="form" size="mini" label-position="top" ref="form">
        <el-row :gutter="10">
          <el-col :lg="4" :md="6">
            <el-form-item label="评分大项编号" prop="id">
              <el-input v-model.trim="form.id" placeholder="请输入评分大项编号" maxlength="20"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="评分大项名称" prop="name">
              <el-input v-model.trim="form.name" placeholder="请输入评分大项名称" maxlength="20"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="评分大项属性" prop="SPECIALATTRIBUTE">
                <el-select v-model="form.SPECIALATTRIBUTE" placeholder="请选择评分大项属性"size="mini">
                  <el-option label="打分" value="1"></el-option>
                  <el-option label="选择" value="2"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
          
          <el-col :lg='8' :md='12' class="searchBtnMarginTop" >
            <el-button type="primary" icon='el-icon-search' size='mini' @click="dataDictionaryQuery">查询</el-button>
            <el-button type='warning' size='mini' icon='el-icon-refresh' @click="resetForm('form')">重置</el-button>
            <el-button type="primary" size="mini" icon='el-icon-plus' @click="addDialog">新增评分大项</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <el-col>
          <el-table :data="tableData" style="margin-top:20px;">
            <el-table-column label="评分大项编号" prop="SCOREMAJORITEMID" align="center"></el-table-column>
            <el-table-column label="评分大项名称" prop="SCOREMAJORITEMNAME" align="center"></el-table-column>
            <el-table-column label="评分大项属性" prop="SPECIALATTRIBUTE" align="center">
              <template slot-scope="scope">
                <div>
                  {{scope.row.SPECIALATTRIBUTE=='1'?'打分':scope.row.SPECIALATTRIBUTE=='2'?'选择':''}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="修改" placement="top">
                  <el-button type="text" style="margin-left:0px" @click="editDialog(scope.row)">
                    <i class="el-icon-edit-outline"></i>
                  </el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                  <el-button type="text" style="margin-left:0px" @click="dictionaryEdit('D',scope.row)">
                    <i class="el-icon-delete"></i>
                  </el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-pagination style="text-align: right; margin-top:20px;" :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize" @size-change="handleInSizeChange" @current-change="handleInCurrentChange"
            :current-page="currpage" background layout="sizes, total, prev, pager, next, jumper" :total="tableTotal">
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <!-- 新增和编辑的Dialog -->
    <el-dialog :title="dialogTitle" v-if="editIsShow" :visible.sync="editIsShow" :close-on-click-modal="false"
      @close="closeDialog('ruleForm')" @open="openDialog">
      <el-card>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px">
          <el-row>
            <el-col :span="16"  v-if="operation == 'edit'">
              <el-form-item label="评分大项编号" prop="SCOREMAJORITEMID">
                <el-input v-model.trim="ruleForm.SCOREMAJORITEMID" size="small" maxlength="50" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="评分大项名称" prop="SCOREMAJORITEMNAME">
                <el-input v-model.trim="ruleForm.SCOREMAJORITEMNAME" size="small" maxlength="50"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="评分大项属性" prop="SPECIALATTRIBUTE">
                <el-select v-model="ruleForm.SPECIALATTRIBUTE" placeholder="请选择评分大项属性" size="small">
                  <el-option label="打分" value="1"></el-option>
                  <el-option label="选择" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog('ruleForm')" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import request from "@/common/utils/requestQC";
  import getGlobalParams from "@/common/utils/getGlobalParams";
  import scoreDictionaryBigQuery from '@/message/QCManage/scoreTemplate/scoreDictionaryBig/scoreDictionaryBigQuery';
  import scoreDictionaryBigEdit from '@/message/QCManage/scoreTemplate/scoreDictionaryBig/scoreDictionaryBigEdit';
  export default {
    data() {
      return {
        form:{
          name:'',
          id: '',
          SPECIALATTRIBUTE: ''
        },
        tableTotal: 1,
        currpage: 1,
        pageSize: getGlobalParams.get("PageSize"),
        ruleForm: {
          SCOREMAJORITEMID: '',
          SCOREMAJORITEMNAME: '',
          SPECIALATTRIBUTE: ''
        },
        rules: {
          SCOREMAJORITEMID: [{
            required: true,
            message: '请输入评分大项编号',
            trigger: 'blur'
          }],
          SCOREMAJORITEMNAME: [{
            required: true,
            message: '请输入评分大项名称',
            trigger: 'blur'
          }],
          SPECIALATTRIBUTE: [{
            required: true,
            message: '请选择评分大项属性',
            trigger: 'change'
          }],
        },
        dialogTitle: '',
        editIsShow: false,
        tableData: [],
        operation: '', //编辑 or 新增
      }
    },
    mounted() {
      this.dataDictionaryQuery();
    },
    methods: {
      resetForm(formName) { //重置查询表单
        this.$refs["" + formName].resetFields();
        this.checkedIds = [];
      },
      async dataDictionaryQuery() {
        let resBody = new scoreDictionaryBigQuery();
        resBody.data.SCOREMAJORITEMID = this.form.id;
        resBody.data.SPECIALATTRIBUTE = this.form.SPECIALATTRIBUTE;
        resBody.data.SCOREMAJORITEMNAME = this.form.name;
        resBody.data.CurrPage = this.currpage;
        resBody.data.PageRowNum = this.pageSize;
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.tableData = response.BODY.REQBODY;
          this.tableTotal = response.BODY.rtnum;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      // 删除弹窗
      delClick(op,info){
        if(op=='D'){
          this.$confirm('是否确定删除记录，删除操作无法恢复!', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.dictionaryEdit(op,info);
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
      },
      // 编辑
      async dictionaryEdit(op, info) {
        let resBody = new scoreDictionaryBigEdit();
        resBody.data.OPERATEMODE = op;
        if (op == 'D') {
          this.$confirm('此操作将删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then( async () => {
            resBody.data.SCOREMAJORITEMID = info.SCOREMAJORITEMID;
            // resBody.data.SCOREMAJORITEMNAME = info.SCOREMAJORITEMNAME;
            let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.closeDialog('ruleForm');
          this.dataDictionaryQuery();
          var msg = '';
          if (op == 'D') {
            msg = '删除成功';
          } else if (op == 'A') {
            msg = '添加成功';
          } else {
            msg = '修改成功';
          }
          this.$message({
            type: "success",
            message: msg
          })
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        } else {
          resBody.data.SCOREMAJORITEMID = this.ruleForm.SCOREMAJORITEMID;
          resBody.data.SCOREMAJORITEMNAME = this.ruleForm.SCOREMAJORITEMNAME;
          resBody.data.SPECIALATTRIBUTE = this.ruleForm.SPECIALATTRIBUTE;
          let response = await request(resBody);
          if (response.SYS_HEAD.ReturnCode == "000000") {
            this.closeDialog('ruleForm');
            this.dataDictionaryQuery();
            var msg = '';
            if (op == 'D') {
              msg = '删除成功';
            } else if (op == 'A') {
              msg = '添加成功';
            } else {
              msg = '修改成功';
            }
            this.$message({
              type: "success",
              message: msg
            })
          } else {
            this.$message({
              type: "error",
              message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
            })
          }
        }
      },
      //前端分页
      handleInCurrentChange(val) {
        this.currpage = val;
        this.dataDictionaryQuery();
      },
      handleInSizeChange(val) {
        this.pageSize = val;
        this.dataDictionaryQuery();
      },
      addDialog() {
        this.editIsShow = true;
        this.dialogTitle = '新增评分大项';
        this.operation = 'add';
      },
      editDialog(row) {
        this.editIsShow = true;
        this.dialogTitle = '修改评分大项';
        this.operation = 'edit';
        this.ruleForm = JSON.parse(JSON.stringify(row));
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.operation == 'add') {
              this.dictionaryEdit('A');
            } else if (this.operation == 'edit') {
              this.dictionaryEdit('U');
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      openDialog() {
        if (this.$refs['ruleForm'] != undefined) {
          this.$refs['ruleForm'].clearValidate();
        }
      },
      closeDialog(formName) {
        this.editIsShow = false;
        this.ruleForm = {
          SCOREMAJORITEMID: '',
          SCOREMAJORITEMNAME: '',
          SPECIALATTRIBUTE: ''
        };
      },
    }
  }

</script>
